/**
 * Copyright (C) <2023> <Boundivore> <boundivore@foxmail.com>
 * <p>
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the Apache License, Version 2.0
 * as published by the Apache Software Foundation.
 * <p>
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * Apache License, Version 2.0 for more details.
 * <p>
 * You should have received a copy of the Apache License, Version 2.0
 * along with this program; if not, you can obtain a copy at
 * http://www.apache.org/licenses/LICENSE-2.0.
 */
/**
 * ComponentListModal - 组件部署情况弹窗
 * @param {boolean} isModalOpen - 弹窗是否打开
 * @param {string} id - 关联的集群id
 * @param {string} service - 关联的服务名称
 * @param {function} handleCancel - 关闭弹窗的回调
 * @author Tracy
 */
import { FC, useState, useEffect } from 'react';
import { t } from 'i18next';
import { Modal, Table, Space, Badge, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import useComponentList from '@/hooks/useComponentList';
import useStore from '@/store/store';
import { BadgeStatus, ComponentSummaryVo } from '@/api/interface';

const ComponentListModal: FC<{
	id: string;
	service: string;
	isModalOpen: boolean;
	handleCancel: () => void;
}> = ({ isModalOpen, handleCancel, id, service }) => {
	const { getComponentList } = useComponentList();
	const [componentListdata, setComponentListdata] = useState([]);
	const { stateText } = useStore();
	const columns: ColumnsType<ComponentSummaryVo> = [
		{
			title: t('includeComponent'),
			dataIndex: 'ComponentName',
			key: 'ComponentName',
			width: '60%'
		},
		{
			title: t('service.node'),
			dataIndex: 'ComponentNodeList',
			key: 'ComponentNodeList',
			render: () => {
				return <></>;
				// return text.map(node => (
				// 	<div key={node.NodeId}>
				// 		<Space size="large">
				// 			{node.Hostname}
				// 			<Badge status={stateText[node.SCStateEnum].status as BadgeStatus} text={t(stateText[node.SCStateEnum].label)} />
				// 		</Space>

				// 		{}
				// 	</div>
				// ));
			}
		}
	];
	useEffect(() => {
		getComponentList(id, service).then(data => {
			setComponentListdata(data);
		});
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [id, service]);

	return (
		<Modal
			title={t('componentDistribution', { name: service })}
			open={isModalOpen}
			onCancel={handleCancel}
			footer={[
				<Button key="cancel" onClick={handleCancel}>
					{t('close')}
				</Button>
			]}
		>
			<Table
				rowKey="ComponentName"
				className="max-h-[500px] overflow-auto"
				dataSource={componentListdata}
				columns={columns}
				pagination={false}
				expandable={{
					expandedRowRender: record => {
						return record.ComponentNodeList.map(node => (
							<div key={node.NodeId} className="text-right">
								<Space size="large">
									{node.Hostname}
									<Badge status={stateText[node.SCStateEnum].status as BadgeStatus} text={t(stateText[node.SCStateEnum].label)} />
								</Space>
							</div>
						));
					}
				}}
			/>
		</Modal>
	);
};
export default ComponentListModal;
